<script lang="ts" setup>
import { ref } from "vue";
import { userLogin } from "@/service/user";
import { useUserStore } from "@/store/user";
import type { FormInstance } from "@arco-design/web-vue";
import { useRouter } from "vue-router";

const form = ref({
  username: "",
  password: "",
});

const loading = ref(false);
const formRef = ref<FormInstance>();
const rules = {
  username: [{ required: true, message: "请输入用户名" }],
  password: [{ required: true, message: "请输入密码" }],
};
const { setToken, setUsername } = useUserStore();
const handleLogin = () => {
  console.log(formRef.value);
  formRef.value?.validate().then((r: any) => {
    if (r) return;
    loading.value = true;
    userLogin(form.value)
      .then((res) => {
        setToken(res.data.token);
        setUsername(form.value.username);
        setTimeout(() => {
          loading.value = false;
          setTimeout(() => {
            location.replace("/");
          }, 100);
        }, 1000);
      })
      .catch(() => {
        loading.value = false;
      });
  });
};
const router = useRouter();
const handleRegister = () => {
  router.push('/register');
};

// 家具图片数组
const images = [
  {
    url: "https://images.unsplash.com/photo-1524758631624-e2822e304c36?q=80&w=1000&auto=format&fit=crop",
    alt: "现代简约风客厅"
  },
  {
    url: "https://images.unsplash.com/photo-1493663284031-b7e3aefcae8e?q=80&w=1000&auto=format&fit=crop",
    alt: "北欧风格家居"
  },
  {
    url: "https://images.unsplash.com/photo-1538688525198-9b88f6f53126?q=80&w=1000&auto=format&fit=crop",
    alt: "木质家具设计"
  }
];

// 图片加载错误处理
const handleImageError = (index: number) => {
  // 备用图片
  const backupImages = [
    "https://images.unsplash.com/photo-1586023492125-27b2c045efd7?q=80&w=1000&auto=format&fit=crop",
    "https://images.unsplash.com/photo-1589834390005-5d4fb9bf3d32?q=80&w=1000&auto=format&fit=crop",
    "https://images.unsplash.com/photo-1556228453-efd6c1ff04f6?q=80&w=1000&auto=format&fit=crop"
  ];
  images[index].url = backupImages[index];
};
</script>

<template>
  <div class="login-container" @keydown.prevent.enter="handleLogin">
    <div class="login-left">
      <div class="login-branding">
        <h1 class="system-name">木木搭家具</h1>
        <h2 class="system-slogan">专业 · 品质 · 创新</h2>
        <div class="divider"></div>
        <p class="system-intro">一站式家居管理</p>
      </div>
      <div class="images-grid">
        <div class="login-image-container" v-for="(image, index) in images" :key="index">
          <img class="login-image" :src="image.url" :alt="image.alt" @error="() => handleImageError(index)" />
        </div>
      </div>
    </div>

    <div class="login-right">
      <div class="login-form-container">
        <div class="login-header">
          <div class="logo-container">
            <i class="logo-icon"></i>
          </div>
          <h2 class="welcome-text">欢迎回来</h2>
          <p class="signin-text">登录您的管理员账户</p>
        </div>

        <a-card class="login-card" :bordered="false">
          <a-form :model="form" :rules="rules" layout="vertical" @submit="handleLogin" ref="formRef">
            <a-form-item field="username" label="用户名">
              <a-input v-model:model-value="form.username" placeholder="请输入用户名" allow-clear>
                <template #prefix>
                  <icon-user />
                </template>
              </a-input>
            </a-form-item>

            <a-form-item field="password" label="密码">
              <a-input-password v-model:model-value="form.password" placeholder="请输入密码" allow-clear>
                <template #prefix>
                  <icon-lock />
                </template>
              </a-input-password>
            </a-form-item>

            <a-form-item>
              <a-button :loading="loading" type="primary" long html-type="submit" class="login-button">
                登录
              </a-button>
            </a-form-item>

            <a-form-item class="register-option">
              <a-button type="text" @click="handleRegister" long>
                没有账号？去注册
              </a-button>
            </a-form-item>
          </a-form>
        </a-card>
      </div>
    </div>
  </div>
</template>

<style scoped lang="less">
.login-container {
  display: flex;
  height: 100vh;
  width: 100%;
  background-color: #f9f9f9;
}

.login-left {
  flex: 1;
  background: linear-gradient(135deg, rgb(var(--arcoblue-6)) 0%, rgb(var(--arcoblue-5)) 100%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: white;
  position: relative;
  padding: 40px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
  user-select: none;
}

.login-branding {
  z-index: 2;
  text-align: center;
  margin-bottom: 40px;
}

.system-name {
  font-size: 42px;
  font-weight: 600;
  margin-bottom: 12px;
  letter-spacing: 1px;
}

.system-slogan {
  font-size: 18px;
  font-weight: 400;
  margin-bottom: 16px;
  letter-spacing: 3px;
}

.divider {
  height: 3px;
  width: 60px;
  background-color: rgba(255, 255, 255, 0.7);
  margin: 20px auto;
  border-radius: 3px;
}

.system-intro {
  font-size: 16px;
  opacity: 0.9;
  font-weight: 300;
}

.images-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
  width: 90%;
  max-width: 1200px;
}

.login-image-container {
  width: auto;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
  height: 300px;
}

.login-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;

  &:hover {
    transform: scale(1.05);
  }
}

.login-right {
  width: 40%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: white;
}

.login-form-container {
  width: 85%;
  max-width: 400px;
}

.login-header {
  text-align: center;
  margin-bottom: 30px;
}

.logo-container {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background-color: #F0F0F7;
  margin-bottom: 20px;
}

.logo-icon {
  display: inline-block;
  width: 35px;
  height: 35px;
  background-image: url('https://api.iconify.design/fluent:home-24-filled.svg');
  background-repeat: no-repeat;
  background-size: contain;
  filter: brightness(0.2);
  /* 使用滤镜调整为深色 */
}

.welcome-text {
  font-size: 28px;
  color: #333;
  margin-bottom: 8px;
  font-weight: 500;
}

.signin-text {
  color: #888;
  margin-bottom: 20px;
}

.login-card {
  width: 100%;
  border-radius: 12px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
}

.login-button {
  height: 46px;
  font-size: 16px;
  font-weight: 500;
  /* 使用主题色变量 */
  background: rgb(var(--primary-6));
  border: none;
  border-radius: 6px;
  margin-top: 10px;
  transition: all 0.3s ease;

  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(var(--arcoblue-6), 0.3);
    background: rgb(var(--primary-5));
  }
}

.register-option {
  margin-top: 10px;
  text-align: center;
}

@media (max-width: 1200px) {
  .images-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 992px) {
  .login-container {
    flex-direction: column;
  }

  .login-left {
    display: none;
  }

  .login-right {
    width: 100%;
  }

  .login-form-container {
    width: 90%;
    max-width: 450px;
    padding: 30px 0;
  }
}

@media (max-width: 576px) {
  .login-form-container {
    width: 95%;
    padding: 20px 0;
  }
}
</style>